<template>
  <view>



    <view class="main"
                 @touchmove="handleTouchMove"
                 @touchstart="handleTouchStart"
                 @touchend="handleTouchEnd">

      <view v-if="topH > 0" :style="{'border': '1px solid red', 'height': topH + 'px'}"></view>

      <view v-for="(item, index) in 36" :key="index">
        <view style="margin-left: 25px;">
          <text>{{ item }}</text>
        </view>
      </view>

      <view v-if="bottomH > 0" :style="{'border': '1px solid red', 'height': bottomH + 'px'}"></view>

    </view>



  </view>
</template>
<script>
export default {
  data(){
    return {
      starty: 0,
      endy: 0,
      endy2: 0,
      //
      flagTouchMoving: false, // 是否正在滑动屏幕
      touchStartTime: 0, // 记录`touchstart`的时间戳
    }
  },
  computed: {
    topH(){
      const y = (this.endy - this.starty)
      return y > 0 ? y : 0
    },
    bottomH(){
      const y = (this.starty -  Math.min(this.endy, this.endy2))
      return y > 0 ? y : 0
    },
    // viewH() {
    //   return this.bottomH + 10
    // }
  },
  methods: {
    resetY(){
      this.starty = this.endy
    },
    handleTouchMove(evt){
      const that = this
      const pageY = evt.touches[0].pageY
      console.log('>> handleTouchMove: ')
      if (that._touchmoveTimer) {
        clearTimeout(that._touchmoveTimer)
      }
      that._touchmoveTimer = setTimeout(()=>{
        that.endy2 = evt.touches[0].pageY
        that.endy = pageY
      }, 18)
    },
    handleTouchStart(evt){
      this.endy = this.starty = evt.touches[0].pageY
      this.touchStartTime = (new Date()).getTime()
    },
    handleTouchEnd(evt){
      this.resetY()
      const interval = (new Date()).getTime() - this.touchStartTime
      console.log('interval: ', interval) // 可以根据 `interval` 的大小来决定是否进行某些动作
    },
  }
}
</script>
<style lang="scss">
.main {
  //border: #0ea391 1px solid;
  height: calc(97vh);
  overflow-anchor: none;
}
</style>
